<html>
    <head>
        <title>废弃的关于作用域插槽的语法</title>
    </head>
    <body>
        <script>
            // 废弃了的关于"作用域插槽"的语法

                        /*
                            v-slot 指令自Vue 2.6.0 起被引入，提供更好的支持 slot 属性 和 slot-scope 属性的api替代方案。

                            v-slot 完整的又来参见这份RFC。
                            在接下来的所有的 2.x 版本中 slot 和 slot-scope 属性仍会被支持，但已经被官方废弃且不会出现在　Vue 3 中。
                        */


                        // 1、 带有 slot 属性的具名插槽（已废弃）
                                /*
                                    自 2.6.0 起被废弃。

                                    在 <template> 上使用特殊的 slot属性，可以将内容从父级传给具名插槽:

                                            <base-layout>
                                                <template slot="header">
                                                    <h1>Here might be a page title</h1>
                                                </template>

                                                <p>A paragraph for the main context</p>
                                                <p>And another one</p.
                                                
                                                <template solt="footer">
                                                    <p>Here's some contact info</p>
                                                </template>
                                            </base-layout>
                                */
                                 
                                //  或者 直接把slot 属性用在一个普通元素上的做法也废弃了:
                                            /*
                                                    <base-layout>
                                                            <h1 slot="header">Here might be a page title</h1>

                                                            <p>A paragraph for the main content</p>

                                                            <p slot="footer" >Here's  some contact info</p>
                                                    </base-layout>
                                            */
                                /*
                                   这里其实还有一个未命名插槽，也就是"默认插槽"，捕获所有未被匹配的内容。

                                   上述两个示例的HTML渲染结果均为：
                                */
                                            /*
                                                <div class="container">
                                                    <header>
                                                        <h1>Here might be a page title</h1>
                                                    </header>
                                                    <main>
                                                        <p>A paragraph for the main content.</p>
                                                        <p>And another one.</p>
                                                    </main>
                                                    <footer>
                                                        <p>Here's some contact info</p>
                                                    </footer>
                                                </div>
                                            */

                        // 2、带有 slot-scope 属性的作用域插槽(已被废弃)
                                  /*
                                      在<template>上使用特殊的slot-scope属性，可以接受传递给插槽的prop。
                                      
                                      把这里提到过的<slot-example>组件作为示例：
                                  */
                                           /*
                                                <slot-example>
                                                    <template slot="default" slot-scope="slotProps">
                                                       {{ slotProps.msg}}
                                                    </template>
                                                </slot-example>

                                                这里的 slot-scope 声明了插槽接收的所有属性的集合对象作为 slotProps 变量，存在于<template>作用域中。
                                                你可以随意命名 slotProps
                                                (这个和之前的作用域插槽在使用时的原理一致，语法被废弃了而已)
                                            */

                                            /*
                                                这里的 slot="default" 可以忽略为隐性写法：

                                                <slot-example>
                                                    <template slot-scope="slotProps">
                                                        {{ slotProps.msg }}
                                                    </template>
                                                </slot-example>
                                            */

                                            /*
                                                slot-scope 属性页可以直接用于非<template>元素上(包括组件):

                                                <slot-example>
                                                    <span slot-scope="slotProps">
                                                        {{ slotProps.msg}}
                                                    </span> 
                                                </slot-example>
                                            */

                                            /*
                                                slot-scope 的值可以接受任何有效的可以出现在函数声明中的参数位置的JavaScript表达式。
                                                这意味着在支持的环境下(单位件组件 或者 现代浏览器) 你也可以在表达式中使用ES6 的解构语法：

                                                <slot-example>
                                                    <span slot-scope="{msg}">
                                                        {{ msg}}
                                                    </span>
                                                </slot-example>
                                           */

                                            /*
                                                使用这里描述过的<todo-list>作为示例，与它等价的使用 slot-scope的代码是:

                                                    <todo-list v-bind:todos="todos">
                                                        <template slot="todo" slot-scope="{todo}">
                                                            <span v-if="todo.isComplete">✓</span>
                                                            {{ todo.text}}
                                                        </template>
                                                    </todo-list>
                                            */

                                        
        </script>
    </body>
</html>